<style lang="less" scoped>
.message {
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 0.2rem;
  overflow: hidden;
}
.head {
  display: flex;
  padding: 0.12rem 0.2rem;
  background-color: #eaeef2;
  align-items: center;
  .title {
    flex: 1;
    color: #333333;
  }
  .time {
    font-size: 0.12rem;
    color: #777777;
  }
}
.info {
  padding: 0.15rem 0;
  margin: 0 0.2rem;
  color: #777777;
  font-size: 0.14rem;
  border-bottom: 1px solid #f3f3f3;
}
.more {
  padding: 0.1rem 0.2rem;
  display: flex;
  justify-content: space-between;

  .clickmore {
    color: #1b88ee;
    font-size: 0.14rem;
  }
  .more7 {
    width: 10px;
  }
}
</style>
<template>
  <div class="component">
    <div class="message">
      <div class="head">
        <div class="title">商铺催款通知</div>
        <div class="time">2019年12月22日 19:31</div>
      </div>
      <div class="info">点位T1-3米层-1号登机口，肯德基20</div>
      <div class="more">
        <div class="clickmore">查看详情</div>
        <div class="more7"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    getData() {},
    format(list) {}
  },
  mounted() {
    this.getData();
  }
};
</script>
